<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <title>吴俊杰-周口师范学院扛把子</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="lib/html5shiv/html5shiv.min.js"></script>
    <script src="lib/respond/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!--导航栏-->
    <nav class="navbar alex_nav">
        <div class="container">
            <!-- 小屏导航 -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <ul class="nav navbar-nav navbar-left img-logo hidden-sm hidden-xs">
                    <li>
                        <img src="./images/QQ_logo.png" alt="">
                    </li>
                </ul>
                <a class="navbar-brand  hidden-sm hidden-lg  " href="#">俊劫</a>
            </div>
            <!-- 大屏导航 -->
            <div class="collapse navbar-collapse  navbar-right" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav">

                    <li class="active">
                        <a href="#">主页</a>
                    </li>
                    <li>
                        <a href="http://www.wujunjie.xin/wordpress" target="_blank">个人博客</a>
                    </li>
                    <li>
                        <a href="./web_resume/" target="_blank">在线简历</a>
                    </li>
                    <li role="presentation" class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">
                            上线项目
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="http://www.yilandt.com/" target="_blank">上海依蓝地毯</a>
                            </li>
                            <li>
                                <a href="http://www.ashenfeng.cn/" target="_blank">河南神风锅炉</a>
                            </li>
                            <li>
                                <a href="http://www.wujunjie.xin/wordpress" target="_blank">个人博客</a>
                            </li>
                        </ul>
                    </li>
                    <li role="presentation" class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">
                            仿官网PC端
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="./QQTIM/" target="_blank">仿QQ TIM主页</a>
                            </li>
                            <li>
                                <a href="./meilishuo/" target="_blank">仿美丽说主页</a>
                            </li>

                            <li>
                                <a href="./xuechenzaixian/" target="_blank">仿学成在线主页</a>
                            </li>
                        </ul>
                    </li>
                    <li role="presentation" class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">
                            H5+Css3
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="./web_resume/" target="_blank">在线简历</a>
                            </li>
                            <li>
                                <a href="./fullpage/" target="_blank">fullPage大屏滚动</a>
                            </li>

                            <li>
                                <a href="./lol/" target="_blank">仿英雄联盟</a>
                            </li>
                        </ul>
                    </li>
                    <li role="presentation" class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">
                            Mobile
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="./travel/" target="_blank">仿去哪了app</a>
                            </li>
                            <li>
                                <a href="./elm/" target="_blank">仿饿了么app</a>
                            </li>

                            <li>
                                <a href="./jd mobile/" target="_blank">仿京东Mobile</a>
                            </li>
                        </ul>
                    </li>
                </ul>

            </div>
        </div>
    </nav>
    <!--轮播图-->
    <section class="alex_banner">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">

            </ol>
            <div class="carousel-inner">

            </div>
            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
    </section>
    <!-- 个人简介 -->
    <section class="myself">
        <div class="container">
            <p class="item-title">个人简介</p>
            <div class="col-sm-12 col-md-4">
                <div class="alex_logo">
                    <img src="./images/alex_sm.png" alt="">
                    <p>吴俊杰</p>
                    <p>周口师范学院</p>
                    <p>网络工程·统招本科</p>
                </div>

            </div>
            <div class="col-sm-6 col-md-4">
                <div class="about_myself">
                    <p>关于我</p>
                    <p>2年web前端学习，16年大一专业课入门，连续两个暑假在校和老师边学习，边做项目。</p>

                    <p>作为与用户最接近的Coder，会多方面考虑用户的需求及体验，追求完美的人机交互。</p>

                    <p>个人性格随和，善于沟通，逻辑清晰，喜欢一些新事物，新技术，有强大的自我调节能力。希望在给贵公司创造价值的同时提高个人修养！</p>
                </div>
            </div>
            <div class="col-sm-12 col-md-4">
                <div class="detail_myself">
                    <p>详情</p>
                    <p>求职岗位：Web前端开发</p>
                    <p>现居地址：杭州西湖</p>
                    <p>电话&微信：18697737169</p>
                    <p>Email： 798595965@qq.com</p>
                    <p>个人博客：
                        <a href="http://www.wujunjie.xin/wordpress" target="_blank">www.wujunjie.xin</a>
                    </p>


                </div>
            </div>
    </section>
    <!--专业技能-->
    <section class="alex_skill">
        <div class="container">
            <p class="item-title">专业技能</p>

            <div class="col-xs-6 col-sm-4 col-md-2">
                <div class="thumbnail">
                    <img src="./images/h5.png" alt="h5专业技能">
                    <div class="caption">
                        <h3>Html5</h3>
                        <p>熟悉H5+Css3的新增内容，会Photoshop的简单使用，能配合UI，根据Psd高度还原设计稿</p>

                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-sm-4 col-md-2">
                <div class="thumbnail">
                    <img src="./images/js.png" alt="h5专业技能">
                    <div class="caption">
                        <h3>Javascript</h3>
                        <p>有良好的JS基础，对原型，对象及闭包有自己的理解。能使用原生JS完成需求，进行模块化开发</p>

                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-sm-4 col-md-2">
                <div class="thumbnail">
                    <img src="./images/jquery.png" alt="h5专业技能">
                    <div class="caption">
                        <h3>jQuery</h3>
                        <p>熟悉jQuery的各种Api，使用过Animate.css,fullpage.js,Stellar.js等插件，能够根据需求封装JQ插件</p>

                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-sm-4 col-md-2">
                <div class="thumbnail">
                    <img src="./images/bootstrap.png" alt="...">
                    <div class="caption">
                        <h3>Bootstrap</h3>
                        <p>熟练使用Bootsrap，了解底层实现原理，能通过修改less定制Bootstrap，高度还原PSD图,完成响应式开发</p>

                    </div>
                </div>
            </div>

            <div class="col-xs-6 col-sm-4 col-md-2">
                <div class="thumbnail">
                    <img src="./images/vue.png" alt="h5专业技能">
                    <div class="caption">
                        <h3>Vue.js</h3>
                        <p>熟悉vue的常用Api，了解vue的生态系统，能灵活使用vueRouter,vueX,Axios进行业务需求的开发</p>

                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-sm-4 col-md-2">
                <div class="thumbnail">
                    <img src="./images/app.png" alt="h5专业技能">
                    <div class="caption">
                        <h3>webApp</h3>
                        <p>熟悉移动端开发技巧，响应式布局，能根据不同设备编写响应式代码，达到完美的用户体验</p>

                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 项目经验 -->
    <section class="alex_experience">
        <div class="container">
            <p class="item-title">项目经验</p>
            <!--页签-->
            <div class="nav-tabs-parent">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#experience_nav01" data-toggle="tab">上线项目</a>
                    </li>
                    <li>
                        <a href="#experience_nav02" data-toggle="tab">仿官网PC端</a>
                    </li>
                    <li>
                        <a href="#experience_nav03" data-toggle="tab">H5+Css3</a>
                    </li>
                    <li>
                        <a href="#experience_nav04" data-toggle="tab">Vue</a>
                    </li>
                    <li>
                        <a href="#experience_nav05" data-toggle="tab">Mobile</a>
                    </li>

                </ul>
            </div>
            <!--内容-->
            <div class="tab-content">
                <div class="tab-pane active" id="experience_nav01">
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <a href="http://www.yilandt.com/" target="_blank" class="experience_box active">
                            <div class="pro_right">
                                <p>技术栈</p>
                                <p>PHP</p>
                                <p>jQuery</p>
                                <p>Bootstrap</p>
                            </div>
                            <div class="pro_left">
                                <h3 class="text-center">上海依蓝地毯有限公司官网</h3>
                                <div class="col-xs-6">
                                    <p>项目时间</p>
                                    <p>2017.7~9</p>
                                </div>
                                <div class="col-xs-6">
                                    <p>担任职位</p>
                                    <p>UI+前端</p>
                                </div>
                                <div class="col-sm-12">
                                    <p>官网地址：www.yilandt.com</p>
                                    <p>由校内导师组建的团队，1前端+3后台，完成整套网站的开发与上线</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <a href="http://www.wujunjie.xin/wordpress/" target="_blank" class="experience_box active">
                            <div class="pro_right">
                                <p>技术栈</p>
                                <p>H5+Css3</p>
                                <p>Linux</p>
                                <p>Wordpress</p>
                            </div>
                            <div class="pro_left">
                                <h3 class="text-center">吴俊杰的个人博客</h3>
                                <div class="col-xs-6">
                                    <p>项目时间</p>
                                    <p>2018.5~</p>
                                </div>
                                <div class="col-xs-6">
                                    <p>担任职位</p>
                                    <p>全栈</p>
                                </div>
                                <div class="col-sm-12">
                                    <p>官网地址：www.wujunjie.xin</p>
                                    <p>独立完成个人博客的设计与编写，服务器搭建与项目上线，熟悉整套网站的开发流程及维护</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <a href="http://www.ashenfeng.cn/" target="_blank" class="experience_box active">
                            <div class="pro_right">
                                <p>技术栈</p>
                                <p>PHP</p>
                                <p>jQuery</p>
                                <p>Bootstrap</p>
                            </div>
                            <div class="pro_left">
                                <h3 class="text-center">河南神风锅炉有限公司官网</h3>
                                <div class="col-xs-6">
                                    <p>项目时间</p>
                                    <p>2017.10~11</p>
                                </div>
                                <div class="col-xs-6">
                                    <p>担任职位</p>
                                    <p>UI+前端</p>
                                </div>
                                <div class="col-sm-12">
                                    <p>官网地址：www.ashenfeng.cn</p>
                                    <p>由校内导师组建的团队，1前端+3后台，完成整套网站的开发与上线</p>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="tab-pane" id="experience_nav02">
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <a href="./QQTIM/" target="_blank" class="experience_box active">
                            <div class="pro_right">
                                <p>技术栈</p>
                                <p>Html+Css</p>
                                <p>jQuery</p>
                                <p>Stellar.js</p>
                            </div>
                            <div class="pro_left">
                                <h3 class="text-center">仿QQ TIM主页</h3>
                                <div class="col-xs-6">
                                    <p>项目时间</p>
                                    <p>2018.3</p>
                                </div>
                                <div class="col-xs-6">
                                    <p>担任职位</p>
                                    <p>前端</p>
                                </div>
                                <div class="col-sm-12">
                                    <p>结合视频教程及W3C规范，仿照QQ TIM主页，用Stellar.js 制作视差滚动效果,练习Stellar插件的使用方法</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <a href="./meilishuo/" target="_blank" class="experience_box active">
                            <div class="pro_right">
                                <p>技术栈</p>
                                <p>Javascript</p>
                                <p>jQuery</p>
                            </div>
                            <div class="pro_left">
                                <h3 class="text-center">仿美丽说官网主页</h3>
                                <div class="col-xs-6">
                                    <p>项目时间</p>
                                    <p>2017.1</p>
                                </div>
                                <div class="col-xs-6">
                                    <p>担任职位</p>
                                    <p>前端</p>
                                </div>
                                <div class="col-sm-12">
                                    <p>结合视频教程及W3C规范，仿照电商美丽说主页，来增加个人熟练度及代码规范</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <a href="./xuechenzaixian/" target="_blank" class="experience_box active">
                            <div class="pro_right">
                                <p>技术栈</p>
                                <p>Html+Css</p>
                            </div>
                            <div class="pro_left">
                                <h3 class="text-center">仿学成在线官网主页</h3>
                                <div class="col-xs-6">
                                    <p>项目时间</p>
                                    <p>2017.1</p>
                                </div>
                                <div class="col-xs-6">
                                    <p>担任职位</p>
                                    <p>前端</p>
                                </div>
                                <div class="col-sm-12">
                                    <p>结合视频教程及W3C规范，仿照教育网站学成在线主页，增加个人对布局和样式的感知</p>
                                </div>
                            </div>
                        </a>
                    </div>

                </div>
                <div class="tab-pane" id="experience_nav03">
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <a href="./web_resume/" target="_blank" class="experience_box active">
                            <div class="pro_right">
                                <p>技术栈</p>
                                <p>H5+Css3</p>
                                <p>jQuery</p>
                            </div>
                            <div class="pro_left">
                                <h3 class="text-center">吴俊杰的在线简历</h3>
                                <div class="col-xs-6">
                                    <p>项目时间</p>
                                    <p>2018.8~9</p>
                                </div>
                                <div class="col-xs-6">
                                    <p>担任职位</p>
                                    <p>UI+前端</p>
                                </div>
                                <div class="col-sm-12">
                                    <p>通过单页模式，总结个人几年来所做的项目经验及技能清单，希望能给人事更好的印象</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <a href="./fullpage/" target="_blank" class="experience_box active">
                            <div class="pro_right">
                                <p>技术栈</p>
                                <p>H5+Css3</p>
                                <p>jQuery</p>
                                <p>fullPage</p>
                            </div>
                            <div class="pro_left">
                                <h3 class="text-center">H5+Css3+fullPage大屏滚动</h3>
                                <div class="col-xs-6">
                                    <p>项目时间</p>
                                    <p>2018.6~8</p>
                                </div>
                                <div class="col-xs-6">
                                    <p>担任职位</p>
                                    <p>UI+前端</p>
                                </div>
                                <div class="col-sm-12">
                                    <p>使用fullPage插件，大量使用Css3中的动画结合jQuery完成大屏滚动效果。</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <a href="./lol/" target="_blank" class="experience_box active">
                            <div class="pro_right">
                                <p>技术栈</p>
                                <p>H5+Css3</p>
                                <p>jQuery</p>
                            </div>
                            <div class="pro_left">
                                <h3 class="text-center">仿英雄联盟官网</h3>
                                <div class="col-xs-6">
                                    <p>项目时间</p>
                                    <p>2016.8~9</p>
                                </div>
                                <div class="col-xs-6">
                                    <p>担任职位</p>
                                    <p>UI+前端</p>
                                </div>
                                <div class="col-sm-12">
                                    <p>利用大二的暑假，在学校和老师学习的课余时间，仿英雄联盟官网整合了一些炫酷的特效，获得学校网页设计大赛一等奖</p>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="tab-pane" id="experience_nav04">
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <a href="./travel/" target="_blank" class="experience_box active">
                            <div class="pro_right">
                                <p>技术栈</p>
                                <p>VueX</p>
                                <p>vueRouter</p>
                                <p>Mock</p>
                                <p>Stylus</p>
                            </div>
                            <div class="pro_left">
                                <h3 class="text-center">Vue仿去哪了app主页</h3>
                                <div class="col-xs-6">
                                    <p>项目时间</p>
                                    <p>2018.6~8</p>
                                </div>
                                <div class="col-xs-6">
                                    <p>担任职位</p>
                                    <p>UI+前端</p>
                                </div>
                                <div class="col-sm-12">
                                    <p>顺从时代主流，学习前端三大框架，并根据官方文档仿去哪了app主页，对vue的整个生态有了一些了解</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <a href="./elm/" target="_blank" class="experience_box active">
                            <div class="pro_right">
                                <p>技术栈</p>
                                <p>VueX</p>
                                <p>vueRouter</p>
                                <p>fetch</p>
                                <p>Sass</p>
                            </div>
                            <div class="pro_left">
                                <h3 class="text-center">Vue仿饿了么app全站</h3>
                                <div class="col-xs-6">
                                    <p>项目时间</p>
                                    <p>2018.6~</p>
                                </div>
                                <div class="col-xs-6">
                                    <p>大神的项目</p>
                                    <p>目前还在学习</p>
                                </div>
                                <div class="col-sm-12">
                                    <p>在社区发现的一枚大牛用vue搭建的饿了么，目前还在更新，目的是完成饿了么app所有功能的实现。 作为初学者，就要多学习大牛的代码规范，编程思想，努力向他们看齐
                                    </p>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="tab-pane" id="experience_nav05">

                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <a href="./jd mobile/" target="_blank" class="experience_box active">
                            <div class="pro_right">
                                <p>技术栈</p>
                                <p>H5+Css3</p>
                                <p>iScroll</p>
                                <p>fastClick</p>
                            </div>
                            <div class="pro_left">
                                <h3 class="text-center">仿京东商城Mobile</h3>
                                <div class="col-xs-6">
                                    <p>项目时间</p>
                                    <p>2018.6~8</p>
                                </div>
                                <div class="col-xs-6">
                                    <p>担任职位</p>
                                    <p>UI+前端</p>
                                </div>
                                <div class="col-sm-12">
                                    <p>结合视频及源码，熟悉了很多移动端布局技巧，能使用touch事件和iScroll进行移动端开发。</p>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 联系方式 -->
    <section class="alex_contact">
        <div class="container">
            <p class="item-title">社&nbsp&nbsp&nbsp&nbsp区</p>
            <div class="col-xs-4 col-sm-4 col-md-2">
                <a href="">
                    <h5>798595965</h5>
                    <img src="./images/QQ.png" alt="">
                </a>
            </div>
            <div class="col-xs-4 col-sm-4 col-md-2">
                <a href="">
                    <h5>18697737169</h5>
                    <img src="./images/wx.png" alt="">
                </a>
            </div>
            <div class="col-xs-4 col-sm-4 col-md-2">
                <a href="">
                    <h5>ID：俊劫丶</h5>
                    <img src="./images/wymusic.png" alt="">
                </a>
            </div>
            <div class="col-xs-4 col-sm-4 col-md-2">
                <a href="https://gitee.com/alexjj">
                    <h5>https://gitee.com/alexjj</h5>
                    <img src="./images/my.png" alt="">
                </a>
            </div>
            <div class="col-xs-4 col-sm-4 col-md-2">
                <a href="https://www.jianshu.com/u/81a990ed5eff">
                    <h5>https://www.jianshu.com/u/81a990ed5eff</h5>
                    <img src="./images/jianshu.png" alt="">
                </a>
            </div>
            <div class="col-xs-4 col-sm-4 col-md-2">

                <a href="">
                    <h5>weibo</h5>
                    <img src="./images/wb.png" alt="">
                </a>
            </div>

        </div>
    </section>
    <!-- 版权所有 -->
    <footer>
        <div class="alex_footer">
            © 2018 Reserved | Design by 吴俊杰 豫ICP备18016362号
        </div>

    </footer>

    <!--使用模版引擎-->
    <script type="text/template" id="pointTemplate">
        <% for(var i = 0 ; i < list.length ; i ++){ %>
            <li data-target="#carousel-example-generic" data-slide-to="<%=i%>" class="<%=i==0?'active':''%>"></li>
            <% } %>
    </script>
    <script type="text/template" id="imageTemplate">
        <% for(var i = 0 ; i < list.length ; i ++){ %>
            <div class="item <%=i==0?'active':''%>">
                <% if(isMobile){ %>
                    <a href="#" class="m_imgBox">
                        <img src="<%=list[i].mUrl%>" alt="">
                    </a>
                    <% }else{ %>
                        <a href="#" class="pc_imgBox" style="background-image: url(<%=list[i].pcUrl%>)"></a>
                        <% } %>
            </div>
            <% } %>
    </script>
    <script src="lib/jquery/jquery.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="lib/artTemplate/template-native.js"></script>
    <script src="lib/iscroll/iscroll.js"></script>
    <script src="js/index.js"></script>
</body>

</html>